<template>
  <div class="box">
    <div class="carthead">购物车页面</div>
    <div class="allgoods">
      <h3>全部商品</h3>
      <div class="cartth">
        <div class="cartml">
          <ul>
            <li class="fxk"><span></span></li>
            <li class="qb" align="left">全部</li>
            <li class="sp" align="left">商品</li>
            <li class="dj" align="left">单价(元)</li>
            <li class="sl" align="left">数量</li>
            <li class="xj" align="left">小计(元)</li>
            <li class="cz">操作</li>
          </ul>
        </div>
      </div>
      <div class="cartbody">
        <div class="cartcontent">
          <ul class="asd">
            <li v-for="(item, id) in cartList" :key="id">
              <!-- {{ item }} -->
              <div class="left-dv">
                <el-checkbox
                  @change="sdsds(id, item.id)"
                  :checked="cartList[id].is_se == 1 ? true : false"
                ></el-checkbox>
                <img
                  :src="'http://localhost:8081/' + item.images"
                  width="80px"
                  height="80px"
                  alt=""
                />
              </div>
              <div class="center-dv">
                {{ item.goods_name }}
              </div>
              <div class="rigth-dv">¥{{ item.price }}.00</div>
              <div class="num-dv">
                <el-input-number
                  v-model="item.num"
                  @change="asd"
                  :min="1"
                  :max="10"
                  label="描述文字"
                  size="mini"
                ></el-input-number>
              </div>
              <div class="xj-dv">¥{{ item.price * item.num }}.00</div>
              <div class="cz-dv">
                <button @click="cartSc(item.user_id, item.goods_id)">
                  移出购物车
                </button>
              </div>
            </li>
          </ul>
        </div>
        <!-- 结算行和结算按钮 -->
        <div class="cart-tool">
          <div class="money-box">
            <div class="chosed">
              已选择 <span id="total_number">{{ sumnum }}</span
              >件商品
            </div>
            <div class="sumprice">
              <span>
                <em>总价（不含运费） ：</em>
                <i class="summoney">¥{{ numprice }}.00</i>
              </span>
            </div>
            <div class="sumbtn">
              <el-button type="danger">
                <router-link to="/getOrderInfo"> 结算商品</router-link>
              </el-button>
            </div>
          </div>
        </div>
        <!-- 占位符 -->
        <div></div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      userInfo: {
        user_id: window.sessionStorage.getItem("userid"),
        username: window.sessionStorage.getItem("username"),
      },
      num: 1,
      cartList: [],
      numprice: 0,
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    sdsds(id, itemid) {
      var isse = this.cartList[id].is_se == 1 ? 0 : 1;
      // console.log(this.cartList[id].is_se);
      axios
        .post("http://localhost:8081/home/sdsds", [itemid, isse])
        .then((res) => {
          this.getCartData();
        });
      this.asd();
    },
    // 计算总价
    asd() {
      this.numprice = 0;
      for (var i = 0; i < this.cartList.length; i++) {
        if (this.cartList[i].is_se == 1) {
          this.numprice += this.cartList[i].num * this.cartList[i].price;
        }
      }
    },
    //是否登录，没登陆的话，进入登录页面
    getCartData() {
      if (!this.userInfo.user_id) {
        return this.$router.push({ path: "/login" });
      }
      axios
        .get("http://localhost:8081/home/getCartData", {
          params: { id: this.userInfo.user_id },
        })
        .then((res) => {
          console.log(res);
          this.cartList = res.data.data;
          this.asd();
        });
    },
    cartSc(user_id, goods_id) {
      // console.log("11111");
      console.log(user_id, goods_id);
      // return;
      // this.id = id;
      axios
        .get("http://localhost:8081/home/cartSc", {
          params: { user_id, goods_id },
        })
        .then((res) => {
          console.log(res);
          this.getCartData();
        });
    },
  },
  computed: {
    sumnum() {
      var total = 0;
      for (var i = 0; i < this.cartList.length; i++) {
        if (this.cartList[i].is_se == 1) total++;
      }
      return total;
    },
  },

  mounted() {
    this.getCartData();
  },
};
</script>
<style >
.cartth {
  margin: 20px;
}
.cartml li {
  float: left;
}
.cartcontent li {
  float: left;
}
li.fxk {
  width: 20px;
}
li.qb {
  width: 180px;
  margin-top: 3px;
  margin-left: 10px;
}

li.sp {
  text-align: center;
  width: 260px;
}
li.dj {
  text-align: center;
  width: 80px;
}
li.sl {
  text-align: center;
  width: 140px;
}
li.xj {
  text-align: center;
  width: 80px;
}
li.cz {
  width: 140px;
}
.cartcontent {
  margin-top: 80px;
}

.asd {
  overflow: hidden;
}
.asd li {
  position: relative;
  width: 940px;
  height: 84px;
  margin-bottom: 25px;
}
.asd li .left-dv img {
  margin-left: 25px;
}
.asd li .left-dv .el-checkbox__inner {
  top: -35px;
}
.asd li div {
  position: absolute;
}
.asd li .left-dv {
  left: 30px;
  max-width: 200px;
}
.asd li .center-dv {
  height: 80px;
  line-height: 80px;
  max-width: 220px;
  left: 220px;
  margin-left: 20px;
  margin-right: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.asd li .rigth-dv {
  top: 30px;
  left: 480px;
  width: 80px;
}
.asd li .num-dv {
  top: 25px;
  left: 550px;
  width: 35px;
}
.asd li .xj-dv {
  top: 25px;
  left: 700px;
  width: 80px;
}
.asd li .cz-dv {
  top: 25px;
  left: 785px;
  width: 140px;
}
.cart-tool {
  width: 900px;
  height: 60px;
}
.money-box {
  float: right;
  width: 350px;
}
.chosed {
  float: left;
  width: 250px;
}
.sumprice {
  float: left;
  width: 250px;
}
.sumbtn {
  float: left;
  width: 100px;
}
</style>